<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.15)"/>
<meta http-equiv="Page-Exit" content="blendTrans(Duration=0.15)"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<link type="text/css" href="./lib/jquery/css/ui-lightness/jquery-ui-1.8.6.custom.css" rel="stylesheet" />	
<script type="text/javascript" src="./lib/jquery/js/jquery-1.4.2.min.js" ></script>
<script type="text/javascript" src="./lib/jquery/js/jquery-ui-1.8.6.custom.min.js" ></script>
<title>JJNG</title>
	<script type="text/javascript" >
	$(document).ready(function(){
	    lastBlock = $("#a1");
	    maxWidth = 510;
	    minWidth = 20;	
	
	    $("ul li a").hover(
	      function(){
	        $(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:500 });
		$(this).animate({width: maxWidth+"px"}, { queue:false, duration:500});
		lastBlock = this;
	      }
	    );
	});
	</script>
	<style type="text/css">
		ul{
		  list-style: none;
		  margin: 0;
		  padding: 0;
		}
		
		ul li{
		  float: left;
		  padding: 10px;
		  display: block;
		}
		
		ul li a{
		  display: block;
		  overflow: hidden;
		  height: 450px;
		  width: 20px;
		}
		
		#a1{
		  width: 510px;
		}
		
		ul li img{
		  position: absolute;
		  border: 0px solid #881212;
		}
		
		ul li div{
		  margin: 0;
		  padding: 0;
		  width: 900px;
		  display: block;
		}
	</style>	
	</head>
	<body style="margin-left: 10%;">
		<ul>
		  <li>
		    <a id="a1">
		      <img src="./img/slide1.png" />
		      <div style="background-color: red;">
		      </div>
		    </a>
		  </li>
		  <li>
		    <a>
		       <img src="./img/slide2.png" />
		      <div style="background-color: blue;">
		      </div>		       
		    </a>
		  </li>
		  <li>
		    <a>
		      <img src="./img/slide3.png" />
		      <div style="background-color: yellow;">
		      </div>
		    </a>
		  </li>
		</ul>
	</body>
</html>